<!DOCTYPE html>
<!-- saved from url=(0068)https://codelover.club/coursefiles/FhNb1Ob3Uu7lqBi3aSaGnUGnZ6sy.html -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css颜色</title>
    <link rel="stylesheet" href="./style/index.css">
    <link rel="stylesheet" href="./style/caidanlan.css">
    <link rel="icon" href="./img/touxiang.jpg">
    <style>
        body{
            background-color: #fff;
        }
        section div {
            /* 给所有div中的文字一个统一的前景色 */
            color: rgb(109, 179, 19);
            width: 200px;
            height: 100px;
            /* 画一个宽一些的边框，留意边框下的背景色 */
            border: 15px red dashed;
            /* div间隔 */
            margin-bottom: 5px;
        }

        .test-named-color {
            background-color: aquamarine;
        }

        .test-rgb {
            background-color: rgb(46, 49, 124);
        }

        .test-rgb-hexadecimal-long {
            background-color: #ed556a;
        }

        .test-rgb-hexadecimal-short {
            background-color: #123;
        }

        .test-hsl {
            background-color: hsl(238, 46%, 33%);
        }

        .test-hsla {
            background: hsla(352, 81%, 63%, 1);
        }

        .test-hsla[title="hsla0.8"] {
            background-color: hsla(352, 81%, 63%, 0.8);
        }

        .test-hsla[title="hsla0.5"] {
            background-color: hsla(352, 81%, 63%, 0.5);
        }

        .test-hsla[title="hsla0.2"] {
            background-color: hsla(352, 81%, 63%, 0.2);
        }


        .test-opacity[title="opacity0.5"] {
            background: #ed556a;
            opacity: 0.5;
        }

        .test-opacity[title="opacity0.8"] {
            background: #ed556a;
            opacity: 0.8;
        }

        .test-opacity[title="opacity0.2"] {
            background: #ed556a;
            opacity: 0.2;
        }

        .test-rgba[title="rgba0.8"] {
            background-color: rgba(237, 84, 105, 0.8);
        }

        .test-rgba[title="rgba0.5"] {
            background-color: rgba(237, 84, 105, 0.5);
        }

        .test-rgba[title="rgba0.2"] {
            background-color: rgba(237, 84, 105, 0.2);
        }
    </style>
</head>

<body>
    <header>
        <nav style="background-color: black;">
            <div class="hleft" style="height: 0px;">
                <img src="./img/touxiang.jpg" alt="">
            </div>
            <div class="hright">
                <a href="https://gitee.com/tian158/task" target="_blank">点击打开仓库</a>
                <div id="bkon" class="bk">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
            </div>
            <div class="hidbox">
                <div class="container">
                    <div class="square" style="--d: 1"></div>
                    <div class="square" style="--d: 2"></div>
                    <div class="square" style="--d: 3"></div>
                    <div class="square" style="--d: 4"></div>
                    <div class="square" style="--d: 5"></div>
                    <div class="square" style="--d: 6"></div>
                    <div class="square" style="--d: 7"></div>
                    <div class="square" style="--d: 8"></div>
                    <div class="square" style="--d: 9"></div>
                </div>
                <div class="hidboxspan menu" style="display: none;">
                    <ul>
                        <li style="--clr:#fff">
                            <a href="./颜色和背景.html" data-text="&nbsp;返回">&nbsp;返回&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./index.html" data-text="&nbsp;主页">&nbsp;主页&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./css颜色.html" data-text="&nbsp;css颜色">&nbsp;css颜色&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./背景练习.html" data-text="&nbsp;背景练习">&nbsp;背景练习&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./五星图.html" data-text="&nbsp;五星图">&nbsp;五星图&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./精灵图.html" data-text="&nbsp;精灵图">&nbsp;精灵图&nbsp;</a>
                        </li>
                        <li style="--clr:#fff">
                            <a href="./渐变色.html" data-text="&nbsp;渐变色">&nbsp;渐变色&nbsp;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="inherit" style="height: 70px;"></div>
    <section>
        <!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
        <div class="test-named-color">测试有名颜色</div>
        <!-- rgb,rgba颜色表示 -->
        <div class="test-rgb">测试rgb颜色</div>
        <!--请设计div和class，探究长短16进制颜色表示 -->
        <div class="test-rgb-hexadecimal-long">测试长16进制颜色</div>
        <div class="test-rgb-hexadecimal-short">测试短16进制颜色</div>
        <!--请设计div和class，探究hsl,hsla颜色表示 -->
        <div class="test-hsl">测试hsl颜色</div>
        <div class="test-hsla">测试hsla颜色</div>
        <!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
        <section style="display: flex;">
            <div class="test-opacity" title="opacity0.8">测试opacity = 0.8</div>
            <div class="test-opacity" title="opacity0.5">测试opacity = 0.5</div>
            <div class="test-opacity" title="opacity0.2">测试opacity = 0.2</div>
        </section>
        <section style="display: flex;">
            <div class="test-rgba" title="rgba0.8">测试rgba = 0.8</div>
            <div class="test-rgba" title="rgba0.5">测试rgba = 0.5</div>
            <div class="test-rgba" title="rgba0.2">测试rgba = 0.2</div>
        </section>
        <section style="display: flex;">
            <div class="test-hsla" title="hsla0.8">测试hsla = 0.8</div>
            <div class="test-hsla" title="hsla0.5">测试hsla = 0.5</div>
            <div class="test-hsla" title="hsla0.2">测试hsla = 0.2</div>
        </section>
    </section>
    <pre>
        div {
            /* 给所有div中的文字一个统一的前景色 */
            color: rgb(109, 179, 19);
            width: 200px;
            height: 100px;
            /* 画一个宽一些的边框，留意边框下的背景色 */
            border: 15px red dashed;
            /* div间隔 */
            margin-bottom: 5px;
        }

        .test-named-color {
            background-color: aquamarine;
        }

        .test-rgb {
            background-color: rgb(46, 49, 124);
        }

        .test-rgb-hexadecimal-long {
            background-color: #ed556a;
        }

        .test-rgb-hexadecimal-short {
            background-color: #123;
        }

        .test-hsl {
            background-color: hsl(238, 46%, 33%);
        }
        .test-hsla{
            background: hsla(352, 81%, 63%, 1);
        }
        .test-hsla[title="hsla0.8"] {
            background-color: hsla(352, 81%, 63%, 0.8);
        }

        .test-hsla[title="hsla0.5"] {
            background-color: hsla(352, 81%, 63%, 0.5);
        }

        .test-hsla[title="hsla0.2"] {
            background-color: hsla(352, 81%, 63%, 0.2);
        }


        .test-opacity[title="opacity0.5"] {
            background: #ed556a;
            opacity: 0.5;
        }

        .test-opacity[title="opacity0.8"] {
            background: #ed556a;
            opacity: 0.8;
        }

        .test-opacity[title="opacity0.2"] {
            background: #ed556a;
            opacity: 0.2;
        }

        .test-rgba[title="rgba0.8"] {
            background-color: rgba(237, 84, 105, 0.8);
        }

        .test-rgba[title="rgba0.5"] {
            background-color: rgba(237, 84, 105, 0.5);
        }

        .test-rgba[title="rgba0.2"] {
            background-color: rgba(237, 84, 105, 0.2);
        }
    </pre>
    <pre>
        &lt!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
    &ltdiv class="test-named-color">测试有名颜色&lt/div>
    &lt!-- rgb,rgba颜色表示 -->
    &ltdiv class="test-rgb">测试rgb颜色&lt/div>
    &lt!--请设计div和class，探究长短16进制颜色表示 -->
    &ltdiv class="test-rgb-hexadecimal-long">测试长16进制颜色&lt/div>
    &ltdiv class="test-rgb-hexadecimal-short">测试短16进制颜色&lt/div>
    &lt!--请设计div和class，探究hsl,hsla颜色表示 -->
    &ltdiv class="test-hsl">测试hsl颜色&lt/div>
    &ltdiv class="test-hsla">测试hsla颜色&lt/div>
    &lt!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
    &ltsection style="display: flex;">
        &ltdiv class="test-opacity" title="opacity0.8">测试opacity = 0.8&lt/div>
        &ltdiv class="test-opacity" title="opacity0.5">测试opacity = 0.5&lt/div>
        &ltdiv class="test-opacity" title="opacity0.2">测试opacity = 0.2&lt/div>
    &lt/section>
    &ltsection style="display: flex;">
        &ltdiv class="test-rgba" title="rgba0.8">测试rgba = 0.8&lt/div>
        &ltdiv class="test-rgba" title="rgba0.5">测试rgba = 0.5&lt/div>
        &ltdiv class="test-rgba" title="rgba0.2">测试rgba = 0.2&lt/div>
    &lt/section>
    &ltsection style="display: flex;">
        &ltdiv class="test-hsla" title="hsla0.8">测试hsla = 0.8&lt/div>
        &ltdiv class="test-hsla" title="hsla0.5">测试hsla = 0.5&lt/div>
        &ltdiv class="test-hsla" title="hsla0.2">测试hsla = 0.2&lt/div>
    &lt/section>
    </pre>


</body>
<script src="./js/anim.js"></script>

</html>